<template>
  <el-row>
    <!-- <el-col :span="21">
      <el-form :model="queryCriteria" :inline="true">
        <el-form-item label="名称:" prop="name">
          <el-input v-model="queryCriteria.name" placeholder="请输入任务名称"/>
        </el-form-item>
        <el-button round type="primary" @click="queryHandler">
          查询
        </el-button>
      </el-form>
    </el-col> -->
    <el-table :data="pagination.list" border style="width: 100%">
      <el-table-column
        v-for="item in cols"
        :key="item.label"
        :label="item.label"
        :prop="item.value"
        :formatter="item.formatter"
      />
      <el-table-column label="调度信息">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="调度信息" trigger="click">
            <div
              v-html="scope.row.triggerMsg ? scope.row.triggerMsg : '暂无'"
            />
            <el-button slot="reference" type="primary">
              查看
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        v-for="item in cols2"
        :key="item.label"
        :label="item.label"
        :prop="item.value"
        :formatter="item.formatter"
      />
      <el-table-column label="执行信息">
        <template slot-scope="scope">
          <el-popover placement="top-start" title="执行信息" trigger="click">
            <div v-html="scope.row.handleMsg ? scope.row.handleMsg : '暂无'"/>
            <el-button slot="reference" type="primary">
              查看
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :page-sizes="[4,8,12,16]"
      :pagination="pagination"
      @page-size-changed="pageSizeChangeHandler"
      @page-changed="pageChangeHandler"
    />

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>异常日志</span>
      </div>
      <div class="text-item">
        日志ID ： {{ logInfo && logInfo.logId ? logInfo.logId : "暂无" }}
      </div>
      <div class="text-item">
        执行器地址 ：
        {{
          logInfo && logInfo.executorAddress ? logInfo.executorAddress : "暂无"
        }}
      </div>
      <div class="text-item">
        起始行号 ：
        {{ logInfo && logInfo.fromLineNum ? logInfo.fromLineNum : "暂无" }}
      </div>
      <div class="text-item">
        结束行号 ：
        {{ logInfo && logInfo.toLineNum ? logInfo.toLineNum : "暂无" }}
      </div>
      <div class="text-item">
        是否结束 ： {{ logInfo && logInfo.end ? "结束" : "未结束" }}
      </div>
      <div class="text-item">
        内容 ：{{ logInfo && logInfo.logContent ? logInfo.logContent : "暂无" }}
      </div>
    </el-card>
  </el-row>
</template>

<script>
import { getCycle, getCycleInfo } from '@/api/workDevelopment/index'
import queryPageForm from '../components/queryPageForm.js'
import { deepMerge } from '../utils/index'

export default {
  mixins: [queryPageForm],
  props: {
    records: { type: Object, default: () => ({}) }
  },
  data() {
    const queryCriteria = this.initQueryCriteria()
    return {
      queryCriteria: queryCriteria,
      cols: [
        {
          label: '调度时间',
          value: 'triggerTime',
          formatter: (row) => {
            return row.triggerTime ? row.triggerTime : '暂无'
          }
        },
        {
          label: '调度结果',
          value: 'triggerCode',
          formatter: (row) => {
            return row.triggerCode ? row.triggerCode : '暂无'
          }
        }
      ],
      cols2: [
        {
          label: '开始时间',
          value: 'handleTime',
          formatter: (row) => {
            return row.handleTime ? row.handleTime : '暂无'
          }
        },
        {
          label: '执行结果',
          value: 'handleCode',
          formatter: (row) => {
            return row.handleCode ? row.handleCode : '暂无'
          }
        }
      ],
      logInfo: {}
    }
  },
  created() {
    if (this.records && this.records.taskStatus === 1) {
      this.getCycleInfoHandle()
    }

    console.log('this.recordsthis.recordsthis.records', this.records)
  },
  methods: {
    // 获取日志详情
    async getCycleInfoHandle() {
      const params = {
        executorAddress: '',
        triggerTime: 0,
        logId: 0,
        fromLineNum: 0
      }
      if (this.pagination.list.length > 0) {
        const ITEMINFO = this.pagination.list[0]
        params.executorAddress = ITEMINFO.executorAddress
        params.triggerTime = ITEMINFO.triggerTime
        params.logId = ITEMINFO.id
      }
      const res = await getCycleInfo(params)
      this.logInfo = res
      this.logInfo.logId = params.logId
      this.logInfo.executorAddress = params.executorAddress
      console.log('获取日志详情=====', res)
    },
    // 初始化搜索表单
    initQueryCriteria(form = {}) {
      return deepMerge(form, {
        jobDesc: this.records.jobName
      })
    },
    // 搜索
    executeQueryPage() {
      let params = this.createQueryParams();
      params.filters.dirId = this.records.id;
      getCycle(params).then((data) => {
        this.queryResultHandler(data)
      })
    },
    notifyFailure(text) {
      this.$q.notify({ type: 'negative', position: 'top', message: text })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-top: 15px;
  padding: 15px 10px;
  box-sizing: border-box;
  border-radius: 6px;
  background-color: #777;
  .text-item {
    font-size: 14px;
    color: #f5f5f5;
  }
}
</style>
